import {AfterViewChecked, Component, ContentChildren, ElementRef, Input, QueryList} from '@angular/core';

import {IndexCellComponent} from './index-cell';


@Component({
    selector: 'ion-index-section',
    template: `
        <div class="index-section" [class.index-section-current]="_current">
            <div class="index-section-index" [class.index-section-index-new]="newStyle">
                {{index}}
            </div>

            <div class="index-section-main" [class.index-section-main-new]="newStyle && index" [class.index-section-main-index]="!index">
                <ng-content></ng-content>
            </div>
        </div>
    `,
    styles: [`
        .index-section-index {
            margin: 0;
            padding: .2rem 1.4rem;
            color:#858894;
            font-size:0.88rem;
            background-color: #fff;
        }

        .index-section-main {
            /*border-bottom: 1px solid #dedede;*/
        }
        .index-section-index-new {
            background-color: transparent;
        }
        .index-section-main-index {
            margin-top: 0;
        }
        .index-section-main-new {
            margin-top: -2.8rem;
        }
        .index-section-current .index-section-index {
            position: sticky;
            position: -webkit-sticky;
            top: 0;
            left: 0;
            width: 100%;
            z-index: 3;
            transform: translateZ(0px);
        }
    `]
})

export class IndexSectionComponent implements AfterViewChecked {

    _current = false;

    @Input() index: string;
    @Input() newStyle = false;
    @ContentChildren(IndexCellComponent) _listOfIndexCell: QueryList<IndexCellComponent>;

    constructor(public elementRef: ElementRef) {

    }

    getElementRef(): ElementRef {
        return this.elementRef;
    }

    ngAfterViewChecked(): void {
    }
}
